<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://granule.com/tags" prefix="g" %>
<!Doctype html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Pokker-app</title>
		<g:compress>			
			<link rel="stylesheet" type="text/css" href="img/reset.css" />
			<link rel="stylesheet" type="text/css" href="img/layout.css" />
			<link rel="stylesheet" type="text/css" href="img/color.css" />
		</g:compress>			
		<g:compress>		
			<script language="javascript" type="text/javascript">
				var wsUri = "ws://localhost:"+<%=request.getLocalPort()%>+"/chat";
			</script>		
			<script src="script/jquery.min.js"></script>		
			<script src="script/poker.js" type="text/javascript"></script>
			<script src="script/chat.js" type="text/javascript"></script>		
			<script type="text/javascript" src="script/chat.js"></script>
		</g:compress>
	</head>
	<body>
	<g:compress>	
		<header>
			<div class="button new_game" id="new_game_button"><p>New Game</p></div>
			<img id="new_game_loading_indicator" alt="..." src="img/loader.gif" style="display:none;" width="16" height="16"/>
			<h1>Poker app</h1>
			<div class="options"></div>
		</header>
		<div class="middle_wrapper">
		<div class="chat">
			<div id="conversation"></div>
			<div class="say"><input type="text" name="chat" id="chat_field" value="" /></div>
			<div id="chat_send"><p>go</p></div>
		</div>
			<div class="game">
				<div class="table_wrapper">
				<div class="table">
						<div class="flop">
							<img id="flop_1" src="img/card_back.png" alt="" width='50' height='63'/>
							<img id="flop_2" src="img/card_back.png" alt="" width='50' height='63'/>
							<img id="flop_3" src="img/card_back.png" alt="" width='50' height='63'/>
							<img id="flop_4" src="img/card_back.png" alt="" width='50' height='63'/>
							<img id="flop_5" src="img/card_back.png" alt="" width='50' height='63'/>
						</div>
						<div class="pot">Current pot:<span id="pot">0</span></div>
						<div class="player player_1">							
							<div class="playerinfo" id="player_1">
								<span id="player_1_name">Player 1</span><br />
								<span id="player_status_1">Waiting</span><br />
								<span id="player_score_1">score</span>
							</div>
							<div class="player_chips">
								<span class="dealer dealer_1" id="dealer_1">&nbsp;</span>
								<span class="chips chips_1" id="chips_1"></span>
							</div>												
						</div>
						<div class="player_cards player_cards_1">
							<span id="player_card1_1"></span>
							<span id="player_card2_1"></span>
						</div>
						<div class="player player_2">
							<div class="playerinfo" id="player_2">
								<span id="player_2_name">Player 2</span><br />
								<span id="player_status_2">waiting</span><br />
								<span id="player_score_2">score</span>
							</div>
							<div class="player_chips">
								<span class="chips chips_2" id="chips_2"></span>
								<span class="dealer dealer_2" id="dealer_2">&nbsp;</span>
							</div>							
						</div>
						<div class="player_cards player_cards_2">
							<span id="player_card1_2"></span>
							<span id="player_card2_2"></span>
						</div>
						<div class="player player_3">
							<div class="player_chips">
								<span class="chips chips_3" id="chips_3"></span>
								<span class="dealer dealer_3" id="dealer_3">&nbsp;</span>
							</div>
							<div class="playerinfo" id="player_3">
								<span id="player_3_name">Player 3</span><br />
								<span id="player_status_3">Waiting</span><br />
								<span id="player_score_3">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_3">
							<span id="player_card1_3"></span>
							<span id="player_card2_3"></span>
						</div>
						<div class="player player_4">
							<div class="player_chips">
								<span class="chips chips_4" id="chips_4"></span>
								<span class="dealer dealer_4" id="dealer_4">&nbsp;</span>
							</div>
							<div class="playerinfo" id="player_4">
								<span id="player_4_name">Player 4</span><br />
								<span id="player_status_4">Waiting</span><br />
								<span id="player_score_4">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_4">
							<span id="player_card1_4"></span>
							<span id="player_card2_4"></span>
						</div>
						<div class="player player_5">
							<div class="player_chips">
								<span class="chips chips_5" id="chips_5"></span>
								<span class="dealer dealer_5" id="dealer_5">&nbsp;</span>
							</div>
							<br/>
							<div class="playerinfo" id="player_5">
								<span id="player_5_name">Player 5</span><br />
								<span id="player_status_5">Waiting</span><br />
								<span id="player_score_5">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_5">
							<span id="player_card1_5"></span>
							<span id="player_card2_5"></span>
						</div>
						<div class="player player_6">
							<div class="player_chips">
								<span class="dealer dealer_6" id="dealer_6">&nbsp;</span>
								<span class="chips chips_6" id="chips_6"></span>
							</div>
							<div class="playerinfo" id="player_6">
								<span id="player_6_name">Player 6</span><br />
								<span id="player_status_6">Waiting</span><br />
								<span id="player_score_6">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_6">
							<span id="player_card1_6"></span>
							<span id="player_card2_6"></span>
						</div>
						<div class="player player_7">
							<div class="player_chips">
								<span class="dealer dealer_7" id="dealer_7">&nbsp;</span>
								<span class="chips chips_7" id="chips_7"></span>
							</div>
							<div class="playerinfo" id="player_7">
								<span id="player_7_name">Player 7</span><br />
								<span id="player_status_7">Waiting</span><br />
								<span id="player_score_7">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_7">
							<span id="player_card1_7"></span>
							<span id="player_card2_7"></span>
						</div>
						<div class="player player_8">
							<div class="player_chips">
								<span class="dealer dealer_8" id="dealer_8">&nbsp;</span>
								<span class="chips chips_8" id="chips_8"></span>
							</div>
							<div class="playerinfo" id="player_8">
								<span id="player_8_name">Player 8</span><br />
								<span id="player_status_8">Waiting</span><br />
								<span id="player_score_8">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_8">
							<span id="player_card1_8"></span>
							<span id="player_card2_8"></span>
						</div>
						<div class="player player_9">
							<div class="player_chips">
								<span class="dealer dealer_9" id="dealer_9">&nbsp;</span>
								<span class="chips chips_9" id="chips_9"></span>
							</div>
							<div class="playerinfo" id="player_9">
								<span id="player_9_name">Player 9</span><br />
								<span id="player_status_9">Waiting</span><br />
								<span id="player_score_9">score</span>
							</div>
						</div>
						<div class="player_cards player_cards_9">
							<span id="player_card1_9"></span>
							<span id="player_card2_9"></span>
						</div>
						<div class="player player_0">
							<div class="playerinfo" id="player_0">
								<span id="player_0_name">Player 10</span><br />
								<span id="player_status_0">Waiting</span><br />
								<span id="player_score_0">score</span>
							</div>
							<div class="player_chips">
								<span class="chips chips_0" id="chips_0"></span>
								<span class="dealer dealer_0" id="dealer_0">&nbsp;</span>	
							</div>
						</div>
						<div class="player_cards player_cards_0">
							<span id="player_card1_0"></span>
							<span id="player_card2_0"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div class="footer_info">			
				<div id="person_cards"></div>
				<div id="footer_buttons">
					<div class="button fold" id="fold_button"><p>Fold</p></div>
					<div class="button call" id="call_button"><p>Call</p></div>
					<div class="button raise" id="raise_button"><p>Raise</p></div>
				</div>
			</div>
		</footer>
		</g:compress>
	</body>
</html>